<template>
  <div>
    <!-- 
      定义导航组件:
      该导航组件被编译成a标签, to 属性被编译成href 属性
    -->
    <!-- 声明式导航 -->
    <p v-show="isshowNav">
      <router-link to="/home">首页</router-link>
      <router-link to="/category">分类</router-link>
      <router-link to="/cart/99">购物车</router-link>
      <router-link to="/mine">我的</router-link>
      <router-link to="/mine/mine2">我的页面的子页面</router-link>
    </p>

    <!-- 编程式导航 -->
    <p v-show="isshowNav">
      <span @click="gotopageFn('/home')">首页</span>
      <span @click="gotopageFn('/category')">分类</span>
      <span @click="gotopageFn('/cart')">购物车</span>
      <span @click="$router.push('/mine')">我的</span>
    </p>

    <!-- 路由组件匹配到的出口 也叫坑, 作用:起到一个占位符的作用 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 100,
      // isshowNav: true
    }
  },
  methods: {
    gotopageFn(path) {
      //console.log(this.$router);
      //push 方法: 其实就是向浏览器的历史记录中新增了一条历史记录
      // this.$router.push(path)
      // replace方法: 其实就是替换掉上一次历史记录, 没有新增 
      this.$router.replace(path);
    }
  },
  computed: {
    isshowNav() {
      //console.log('计算属性');
      return this.$route.path == '/login' ? false : true
    }
  },
  // watch: {
  //   $route: {
  //     handler(newvalue) {
  //       // console.log('newvalue', newvalue);
  //       if (newvalue.path == '/login') {
  //         this.isshowNav = false
  //       } else {
  //         this.isshowNav = true
  //       }
  //     }
  //   }
  // },
  mounted() {
    // 当前路由的信息对象
    // console.log(this.$route);
  }
}
</script>
<style scoped>
.router-link-active {
  background-color: red;
}
</style>